<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="user" class="com.hebxy.ssm.entity.User" scope="request"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath %>static/js/jquery-2.1.0.js"></script>
<script>
	function checkStrength(password){
		const strength = calculateStrength(password);
		updateStrengthUI(strength);
	}
	
	function calculateStrength(password){
		const hasDigit = /\d/.test(password);
		const hasLower = /[a-z]/.test(password);
        const hasUpper = /[A-Z]/.test(password);
        const hasSpecial = /[^a-zA-Z0-9]/.test(password);
        const length = password.length;
        
        if (length >= 12 && hasDigit && hasLower && hasUpper && hasSpecial) return 'STRONG';
        else if (length >= 8 && ((hasDigit && (hasLower || hasUpper)) || hasSpecial)) return 'MEDIUM';
        else return 'WEAK';
	}
	
	function updateStrengthUI(strength) {
        const img = document.getElementById('strengthImg');
        const text = document.getElementById('strengthText');
        
        switch(strength) {
            case 'STRONG':
                img.src = '${pageContext.request.contextPath}/static/image/strength-strong.png';
                text.textContent = '强';
                text.style.color = 'green';
                break;
            case 'MEDIUM':
                img.src = '${pageContext.request.contextPath}/static/image/strength-medium.png';
                text.textContent = '中';
                text.style.color = 'orange';
                break;
            default:
                img.src = '${pageContext.request.contextPath}/static/image/strength-weak.png';
                text.textContent = '弱';
                text.style.color = 'red';
        }
    }
</script>
<style type="text/css">
    /* 新增美化样式 */
    body {
        background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                    url('${pageContext.request.contextPath}/static/image/bg.jpg') center/cover fixed;
        color: #000;
        min-height: 100vh;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        background: #2c3e50;
        border-radius: 15px;
        box-shadow: 0 0 30px rgba(0,128,255,0.3);
    }

    h1 {
        text-align: center;
        color: #007bff;
        font-size: 2.5em;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        margin-bottom: 30px;
    }

    .form-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 15px;
        margin: 20px 0;
    }

    .form-table td {
        padding: 12px;
        background: rgba(255,255,255,0.95);
        border-radius: 8px;
        transition: transform 0.3s;
    }

    .form-table tr:hover td {
        transform: translateX(10px);
        background: rgba(245,245,245,0.95);
    }

    input[type="text"], input[type="password"], input[type="number"] {
        width: 100%;
        padding: 10px;
        border: 2px solid #007bff;
        border-radius: 25px;
        transition: all 0.3s;
        background: rgba(255,255,255,0.9);
    }

    input:focus {
        outline: none;
        box-shadow: 0 0 15px rgba(0,123,255,0.3);
    }

    .strength-box {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    #strengthImg {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .submit-btn {
        background: linear-gradient(45deg, #007bff, #00ff88);
        color: white;
        padding: 12px 35px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 1.1em;
        transition: all 0.3s;
    }

    .submit-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0,123,255,0.5);
    }

    .nav-links {
        margin-top: 20px;
        text-align: center;
    }

    .nav-links a {
        color: #007bff;
        text-decoration: none;
        margin: 0 15px;
        padding: 8px 15px;
        border-radius: 20px;
        transition: all 0.3s;
    }

    .nav-links a:hover {
        background: rgba(0,123,255,0.1);
        transform: translateY(-2px);
    }

    .error {
        color: #ff4444;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .decorations {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	pointer-events: none;
    	z-index: -1;
	}

	.glow {
	    position: absolute;
	    width: 200px;
    	height: 200px;
   	 	background: radial-gradient(circle, rgba(0,123,255,0.4) 0%, transparent 70%);
    	animation: glowMove 20s infinite linear;
	}

	@keyframes glowMove {
    	0% { transform: translate(10%, 10%); }
   	 	50% { transform: translate(80%, 80%); }
    	100% { transform: translate(10%, 10%); }
	}
</style>

<body>
<div class="container">
    <h1>✨ 用户尊享注册 ✨</h1>
    <form:form action="${pageContext.request.contextPath }/user/register" method="POST" modelAttribute="user">
        
        <!-- 手机卡号选择 -->
        <div class="card-selector">
            <h3>📱 请选择您的专属号码</h3>
            <table class="form-table">
				<c:forEach var="card_number" items="${card_numbers }" varStatus="st">
					<c:if test="${st.index%2==0}">
						<tr>
					</c:if>
							<td>
								<input type="radio" name="card_number" value="${card_number }"/>${card_number }
							</td>
					<c:if test="${st.index%2==1}">
						</tr>
					</c:if>
				</c:forEach>
			</table>${card_number }<br>
        </div>

        <!-- 套餐选择 -->
        <div class="plan-selector">
            <h3>🎁 选择心仪套餐</h3>
            <table class="form-table">
                <tr>
				<td>请选择</td>
				<td>套餐名称</td>
				<td>通话时长（分钟）</td>
				<td>上网流量（MB）</td>
				<td>短信条数（条）</td>
				<td>资费（元/月）</td>
			</tr>
		<c:forEach var="plan" items="${plans }" varStatus="st">
			<tr>
				<td><input type="radio" name="plan_id" value="${plan.id }"></td>
				<td>${plan.plan_name }</td>
				<td>${plan.call_time }</td>
				<td>${plan.data_usage }</td>
				<td>${plan.sms_count}</td>
				<td>${plan.monthly_fee }</td>
			</tr>
		</c:forEach>
			<tr>
				<td></td>
				<td>${taocan.plan_name }</td>
				<td>${taocan.call_time }</td>
				<td>${taocan.data_usage }</td>
				<td>${taocan.sms_count}</td>
				<td>${taocan.monthly_fee }</td>
			</tr>
            </table>
        </div>

        <!-- 用户信息 -->
        <div class="user-info">
            <h3>🔐 设置账户信息</h3>
            <table class="form-table">
                <tr>
                    <td>👤 用户名：</td>
                    <td>
                        <form:input path="username" placeholder="请输入用户名"/>
                        <form:errors path="username" class="error"/>
                    </td>
                </tr>
                <tr>
                    <td>🔑 密码：</td>
                    <td>
                        <form:input path="password" type="password" 
                                  placeholder="至少8位含大小写字母和数字" 
                                  onkeyup="checkStrength(this.value)"/>
                        <div class="strength-box">
                            <img id="strengthImg" alt="密码强度"
                                 src="${pageContext.request.contextPath}/static/image/strength-default.png">
                            <span id="strengthText">未检测</span>
                        </div>
                        <form:errors path="password" class="error"/>
                    </td>
                </tr>
                <tr>
                    <td>💳 预存金额：</td>
                    <td>
                        <input name="prepaid_amount" type="number" 
                              value="${user.prepaid_amount }"
                              placeholder="请输入金额">
                        ${msg2 }
                    </td>
                </tr>
            </table>
        </div>

        <div class="action-area">
            <input type="submit" value="立即注册" class="submit-btn" 
                  onclick="return confirm('确认开启尊享服务吗？💎')">
            ${msg }
        </div>
    </form:form>

    <div class="nav-links">
        <a href="${pageContext.request.contextPath }/user/login" class="login-link">${msg1 }</a>
        <a href="javascript:history.back();" class="back-link">↩ 返回上级</a>
    </div>
</div>

<!-- 添加动态装饰元素 -->
<div class="decorations">
    <div class="particle"></div>
    <div class="glow"></div>
</div>
</body>
</body>
</html>